<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出菜单</title>
<script type="text/javascript">
function PopMenu(ct,btn,menu) {
    btn.onmouseover = function(){
        ct.appendChild(menu);
        menu.style.display = "block";
    }
    btn.onmouseout  = function(){
        menu.style.display = "none";
    }
    menu.onmouseover= function(){
        ct.appendChild(menu);
        menu.style.display = "block";
    }
    menu.onmouseout = function(){
        menu.style.display = "none";
    }
}

window.onload = function(){
    var p1 = document.getElementById("p1");
    var p2 = document.getElementById("p2");
    var div1 = document.getElementById("div1");
    PopMenu(div1,p1,p2);
}
</script>
<style>
    ul{ float:left; list-style-type:none;}
    ul li{ float:left; width:80px;} 
    ul li a{ border:1px solid; text-decoration:none;}
    ul li div{ display:none;}
    
    #div1{ border:1px solid; width:200px; height:150px;}
    p{ width:100px; height:100px; border:1px solid;}
</style>
</head>


<body>
<h2>弹出菜单</h2>
<ul>
    <li>
        <a href="#">按钮A</a>
        <div>内容A</div>
    </li>
    <li>
        <a href="#">按钮B</a>
        <div>内容B</div>
    </li>
    <li>
        <a href="#">按钮C</a>
        <div>内容C</div>
    </li>   
</ul>  
<div id="div1">在我这里显示！</div>
<p id="p1">导航1</p>
<p id="p2" style="display: none;">内容1</p>
</body>
</html>